{"componentChunkName":"component---src-templates-blog-post-js","path":"/Easiest-way-to-set-up-your-Github-profile-page/","result":{"data":{"site":{"siteMetadata":{"title":"Aleks Popovic - personal website and blog"}},"markdownRemark":{"id":"d2cfe6a1-7c72-5e80-8447-60e9b50c9fa3","excerpt":"If you are a developer you probably have a GitHub account, and if you’re like me your profile page is probably empty. I would even say barren. Utterly…","html":"

If you are a developer you probably have a GitHub account, and if you’re like me your profile page is probably empty. I would even say barren. Utterly uninteresting? If that’s true then you are at the right place, because in this tutorial I am going to show you some quick and easy tips to make your GitHub profile at least somewhat presentable.

\n

If you prefer a video version you can watch me build this on Youtube:

\n
\n

Setting up the repo

\n

To start off - you need to have a GitHub account, which I assume you do. You will also need to create a super-secret type of repo, which is just a repo with the exact same name as your GitHub account name. You need to initialize it as a public repo with a ReadMe file, because that is where all the magic happens.

\n

We need to edit the readme file with some markdown and it will all show up on our profile page once we commit the changes. You can do all of these edits straight from the GitHub’s file editor, or you can do it from your preferred text editor and upload the changes to your repo after you are finished. If you are unfamiliar with markup or need a quick refresher you can always reference this Markdown CheatSheet on GitHub.

\n

Using images

\n

You can use images in your ReadMe file, just as you would in regular markdown/HTML. For ease of access you can opt to upload your images into the same repo as your profile ReadMe, and then you can access them like this:

\n
![logo](BannerTransparent.png \"banner\")\n\n// Logo is the image alt text\n// BannerTransparent.png is the image we are showing (it needs to be on the same level as the ReadMe file)\n// banner is the popup text you get on hover. Feel free to change these to fit your image.
\n

or like this:

\n
<img src=\"/BannerTransparent.png\" alt=\"banner\" />\n\n// Regular HTML works in markdown
\n

You can also align your images, as well as your other page elements, to left, right, or center, by using the “align” property (works only with HTML syntax):

\n
<img src=\"/BannerTransparent.png\" alt=\"banner\" align=\"center\" />\n\n// Instead of \"center\" you can use \"left\" or \"right\"
\n

Headings and text in markdown

\n

To create headings you need to use the hashtag symbol - #. The number of symbols determines the heading level.

\n
# Hi there and welcome to my GitHub page 👋 - level 1\n\n## Hi there and welcome to my GitHub page 👋 - level 2\n\n### Hi there and welcome to my GitHub page 👋 - level 3\n\n#### Hi there and welcome to my GitHub page 👋 - level 4\n\n##### Hi there and welcome to my GitHub page 👋 - level 5\n\n###### Hi there and welcome to my GitHub page 👋 - level 6
\n

For the main part of your profile you can write any sort of text without specific markdown syntax and GitHub will even give you some prompts, like “I am currently working on…”, “My interests are…” and similar. You can customize that however you like, but I want to focus on some very useful tools that you can use to showcase your skills, tools, programming languages and other GitHub stats.

\n

Set up custom tech badges

\n

Most of us will want to display the technologies we use in our day to day work and there are two awesome tools you can use to create very nice and shiny badges for pretty much any tech you use. They are Shields.io and SimpleIcons.org and here is an example of what you can create with them.

\n
    \n
  1. Style: For the Badge
    2. \n
\n\"React\"\n\"Angular\"\n\"JavaScript\"\n\"Sass\"\n\"Gatsby\"\n\"GraphQl\"\n
\n
    \n
  1. Style: Flat
    2. \n
\n\"React\"\n\"Angular\"\n\"JavaScript\"\n\"Sass\"\n\"Gatsby\"\n\"GraphQl\"\n
\n
    \n
  1. Style: Flat Square
    2. \n
\n\"React\"\n\"Angular\"\n\"JavaScript\"\n\"Sass\"\n\"Gatsby\"\n\"GraphQl\"\n
\n
    \n
  1. Style: Plastic
    2. \n
\n\"React\"\n\"Angular\"\n\"JavaScript\"\n\"Sass\"\n\"Gatsby\"\n\"GraphQl\"\n

The syntax is really simple, and like I said, you can create a custom badge for any technology, language or tool you can think of. Here is what it looks like:

\n
<img src=\"https://img.shields.io/badge/BadgeText-HexColor?logo=SimpleIconName&logoColor=ColorName&style=ShieldStyle\" />
\n

Let’s break down all of the properties from that Url.

\n

The BadgeText is your label or badge text. In my examples above those would be React, Angular, Gatsby etc.

\n

HexColor is hex value of the color you want for your badge. If you want to stick with the official logo color for the tech/tool you are putting on the badge - you can find that on SimpleIcons.org. Just enter your tech in the search bar and you will get the logo image, logo name and it’s hex color value. It’s pretty sweet. While you are there make sure to grab the logo name as well, since that is what you need to use instead of the SimpleIconName in my example Url above.

\n

Replace ColorName to a desired logo color. You can find the list of available color names on Shields.io.

\n

Lastly, you need to switch ShieldStyle with one of the four values I mentioned above: plastic, flat, flat-square or for-the-badge. This will change the shape and look of your badge and you can see the examples above.

\n

There are additional properties that you can change which I didn’t use here, and you can find them on the official website.

\n

Once you are done creating you badges you will probably want to put them in a single line in your GitHub ReadMe. To do this you need to wrap all image tags into a paragraph tag and it will work like a charm.

\n

Here is the code example for what I used in my profile ReadMe:

\n
<p>\n  <img alt=\"React\" src=\"https://img.shields.io/badge/React-61DAFB?logo=react&logoColor=white&style=for-the-badge\" />\n  <img alt=\"Angular\" src=\"https://img.shields.io/badge/Angular-DD0031?logo=angular&logoColor=white&style=for-the-badge\" />\n  <img alt=\"JavaScript\" src=\"https://img.shields.io/badge/JavaScript-F7DF1E?logo=javascript&logoColor=white&style=for-the-badge\" />\n  <img alt=\"HTML\" src=\"https://img.shields.io/badge/HTML-E34F26?logo=html5&logoColor=white&style=for-the-badge\" />\n  <img alt=\"Css\" src=\"https://img.shields.io/badge/CSS-1572B6?logo=css3&logoColor=white&style=for-the-badge\" />\n  <img alt=\"Sass\" src=\"https://img.shields.io/badge/Sass-CC6699?logo=sass&logoColor=white&style=for-the-badge\" />\n  <img alt=\"Gatsby\" src=\"https://img.shields.io/badge/Gatsby-663399?logo=gatsby&logoColor=white&style=for-the-badge\" />\n  <img alt=\"GraphQl\" src=\"https://img.shields.io/badge/GraphQL-E10098?logo=graphql&logoColor=white&style=for-the-badge\" />\n  <img alt=\"C Sharp\" src=\"https://img.shields.io/badge/C%23-239120?logo=c-sharp&logoColor=white&style=for-the-badge\" />\n  <img alt=\"Unity\" src=\"https://img.shields.io/badge/Unity-000000?logo=unity&logoColor=white&style=for-the-badge\" />\n</p>
\n

If you want to create contact cards/badges you can make them the same way. Like I said, you are not limited to just programming language logos. If you want them to link to your email or social media you will have to wrap them inside of a url tag, like this:

\n
<a href=\"https://www.youtube.com/channel/UCu3RVedqyL5o776xyQlbyAw\">\n  <img\n    alt=\"Youtube\"\n    src=\"https://img.shields.io/badge/youtube-FF0000?logo=youtube&logoColor=white&style=for-the-badge\"\n  />\n</a>\n<a href=\"https://twitter.com/alekswritescode\">\n  <img\n    alt=\"Twitter\"\n    src=\"https://img.shields.io/badge/Twitter-1DA1F2?logo=twitter&logoColor=white&style=for-the-badge\"\n  />\n</a>\n<a href=\"https://www.instagram.com/aleks.popovic/\">\n  <img\n    alt=\"Instagram\"\n    src=\"https://img.shields.io/badge/Instagram-E4405F?logo=instagram&logoColor=white&style=for-the-badge\"\n  />\n</a>\n<a href=\"https://www.linkedin.com/in/alekspopovic/\">\n  <img\n    alt=\"Linkedin\"\n    src=\"https://img.shields.io/badge/linkedin-0077B5?logo=linkedin&logoColor=white&style=for-the-badge\"\n  />\n</a>
\n

GitHub Stats

\n

If you are interested into setting up all sorts of different stats on your GitHub profile you should definitely check out this awesome repo. I will show you how to use a couple of cool widgets from there, namely - GitHub Stats Card and Top Languages Card.

\n

Github Stats Card

\n

There is an easy way to display all of your GitHub stats using this simple widget. You just need to take this line of code in markdown or HTML, enter your GitHub username and paste it into your ReadMe file:

\n
![github stats](https://github-readme-stats.vercel.app/api?username=YourUsername)
\n
<img src=\"https://github-readme-stats.vercel.app/api?username=YourUsername\" />
\n

Apart from entering your username, which is mandatory to see the stats, you can also enter other parameters to customize the display card. One of them is theme, which you can use to set up one of existing color themes. You can find the full list of them in the repo, but you can also customize all of the colors on your own, or even submit a new theme.

\n

Here is an example of how you can customize the card to display stats for private repos, use a custom card title, show icons for each stat and use a custom color for text, title and icons:

\n
<img\n  src=\"https://github-readme-stats.vercel.app/api?username=alekspopovic&count_private=true&title_color=FD9047&icon_color=FD9047&text_color=0C2233&custom_title=Aleks+Popovic's+GitHub+Stats&show_icons=true\"\n/>
\n

You can find the list of all parameters in the repo, as well as their potential values.

\n

Top Languages Card

\n

If you want to show your visitors what programming languages you mostly use in your repos there is an easy way to do that as well. Here is the code you need to enter into your ReadMe and don’t forget to enter your own username:

\n
![Top languages](https://github-readme-stats.vercel.app/api/top-langs/?username=alekspopovic)
\n

or

\n
<img\n  src=\"https://github-readme-stats.vercel.app/api/top-langs/?username=alekspopovic\"\n/>
\n

As far as additional parameters go you can use hide to block one or more languages from showing, langs_count to increase or decrease the number of languages shown (default value is 5) and layout=compact to display a one-line graphical spread with a percentage list.

\n

Wakatime Week Stats

\n

This one gets an honorable mention since I don’t use Wakatime myself, but it looks very cool so I couldn’t leave it out. If you never heard about it - Wakatime is an “open source plugin for metrics about your programming”. It measures your daily productivity and tracks all sorts of stats about your programming languages and general coding habits.

\n

To use it you will need to create an account on their official website and follow the setup instructions for your favorite IDE or text editor.

\n

After that you can use it in a similar way to the previous two, but this time you will need to swap in your Wakatime username.

\n
![Wakatime stats](https://github-readme-stats.vercel.app/api/wakatime?username=USERNAME)
\n

or

\n
<img\n  src=\"https://github-readme-stats.vercel.app/api/wakatime?username=USERNAME\"\n/>
\n

If you are using Wakatime please let me know what are your impressions and if it’s helped you with your productivity. I’m really curious because I am considering to start using it myself.

\n

Additional inspiration

\n

Like I said in the introduction - my GitHub profile was empty just a couple of days ago. I was inspired to add stuff to it when I saw this Twitter thread by Jack Forge. I was scrolling through the multitude of responses, clicking to all the different profiles and I thought to myself - Damn, these people have really cool looking GitHub profiles. I want to make something like that.

\n

Once I did that I wanted to share what I found and figured out with you. You can find some pretty nice profiles in there, but if you want some more examples of what can be done with just some markdown - you can check out this great repo with a list of awesome GitHub profiles.

\n

If you want to check out my modest GitHub profile which features most of the examples I outlined in this tutorial you can find it here.

\n
\n
If you have any questions or comments you can reach out to me on Twitter and Instagram, where I also post interesting code tidbits and designs.\n

I also have a YouTube channel where I regularly upload React and web dev tutorials, so if that’s your cup of tea feel free to support me by subscribing.

","frontmatter":{"title":"Easiest way to set up your GitHub profile page","series":null,"seriesLink":null,"date":"November 27, 2020","description":"If you are a developer you probably have a GitHub account, and if you're like me your profile page is probably empty. I would even say barren. Utterly uninteresting? If that's true then you are at the right place, because in this tutorial I am going to show you some quick and easy tips to make your GitHub profile at least somewhat presentable.","tags":["productivity","github"],"featuredImage":{"childImageSharp":{"fluid":{"base64":"data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAICAYAAAD5nd/tAAAACXBIWXMAAA7EAAAOxAGVKw4bAAACMklEQVQozy2Sy0tUcRiGDwhWuOqvaFdtpFIMEReFFcwiGCvTLihBymBM6tznzOWM58zNuZwzDiPaYE6FZZFRmUQluMisMCJbSFDgJsistDRnnn5T7b/v+Z735ZMm5CgfYgobup9iyguGH3QZMj5+pvx8H5D5kgzwy1BYUl2YGw7RXN/ActgB2SBbYr5k+ChGOylq7Uhz/f0saAqf4kG+TY7x8VqO5bvXWcrrvLuRZ3lynB+67++BhYxKprcT28kjjFrO/AfKFDMBSonL/4BTgX5mgwHeZxLMPZ5idrzA/INJZp895c7ELWYePWQ16RZAmcWhGAWXFbnFxLCljbW0gBleARSGabsAdiAVPCrTPhFpNMH8WI7FvMHrTJi3twu8GBviZTYqFj1iwc3KlTDTEQ+KuYl7tnY2RNyi4RGWXkq6i2L4AtKK6K2YdvIqM0CPmkMJxPEpSeRAgqgcYiQcZ0718jnp46YWI2XpwrRnF7aWE8yE/GwaLmHvZksASxEBXE2X4zgYjSdpdAxS7blKjTWJ2aXT7CyDYzxPqTR2Z6k8nsRkCaOebqLzbBtSTTf1rTJfhWGZsVU2XNOdrBtuFqIunig2UqEIeb+P+0En2YDCsKZR6ygg1drYcUxlZ2uWU61W6kxdVOyzIFVfovuiE3I2fpc73DTs4iXsogcbDPaJS1bRRx/rul28kBUtMYJ0OETV3vNsP6qxzTSAdMCJdNBBZV0vFbvPUbW/gzehHoi08weZDrUph46jhwAAAABJRU5ErkJggg==","aspectRatio":2.6666666666666665,"src":"/static/cc4780a5217804212e07214ae02b06ca/0e6e2/github.png","srcSet":"/static/cc4780a5217804212e07214ae02b06ca/b460a/github.png 480w,\n/static/cc4780a5217804212e07214ae02b06ca/6e898/github.png 960w,\n/static/cc4780a5217804212e07214ae02b06ca/0e6e2/github.png 1920w","srcWebp":"/static/cc4780a5217804212e07214ae02b06ca/30cf3/github.webp","srcSetWebp":"/static/cc4780a5217804212e07214ae02b06ca/35871/github.webp 480w,\n/static/cc4780a5217804212e07214ae02b06ca/fcc10/github.webp 960w,\n/static/cc4780a5217804212e07214ae02b06ca/30cf3/github.webp 1920w","sizes":"(max-width: 1920px) 100vw, 1920px"}}}}}},"pageContext":{"slug":"/Easiest-way-to-set-up-your-Github-profile-page/","previous":{"excerpt":"A lot of portfolio websites today have some sort of a timeline which can be used in different ways. You can showcase your job and education…","fields":{"slug":"/Build-Simple-Timeline-in-React/"},"frontmatter":{"date":"November 22, 2020","title":"Build Simple Timeline in React","series":null,"description":"A lot of portfolio websites today have some sort of a timeline which can be used in different ways. You can showcase your job and education history, past projects, your blog posts and everything else that can be structured in a timeline. You can potentially build this on your own, or you can use one of the existing plugins which are very easy to setup and look pretty good out of the box. I will show you one of those plugins and an example of how you can generate all elements with some simulated data and you will have your own timeline in no time.","tags":["web","react"],"featuredImage":{"id":"8565fbb1-fa74-5acb-8341-fed7b1fa014f","publicURL":"/static/a929e3923f26a25007ff04dbf6fd2936/timeline.png","relativeDirectory":"Build-Simple-Timeline-in-React","relativePath":"Build-Simple-Timeline-in-React/timeline.png"}}},"next":{"excerpt":"Pixel art games have been making a huge comeback in recent years, but this time not because we are limited by technology, but because pixel…","fields":{"slug":"/How-to-build-a-Pixel-Art-Drawing-App-in-React/"},"frontmatter":{"date":"December 05, 2020","title":"How to build a Pixel Art Drawing App in React","series":null,"description":"Pixel art games have been making a huge comeback in recent years, but this time not because we are limited by technology, but because pixel art is really great. Some game developers are adjusting their workflows to transform their end product into a pixel art game even though they might start with 3d modeling at first. Others go the usual way of drawing sprites in a Pixel Art Editor and that is exactly what we are going to build today. We will go over how to generate a dynamic pixel grid, how to set up a color picker, how to actually draw pixels and in the end how to export your finished pixel art into a png image.","tags":["web","react"],"featuredImage":{"id":"8c98e87e-4c0d-56d9-a288-41dc668e7a8f","publicURL":"/static/289cf244f4327c29c8bdd92f75c2f460/pixels.png","relativeDirectory":"How-to-build-a-Pixel-Art-Drawing-App-in-React","relativePath":"How-to-build-a-Pixel-Art-Drawing-App-in-React/pixels.png"}}}}}}